<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-25 16:01:50
 * @LastEditDate: Do not exit
-->
<template>
  <div>
      <el-container>
      <el-header>
        <Head/>
      </el-header>

      <el-main>
          <!-- 导航 -->
            <div class="na">
                <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#fffeee"
            text-color="#000"
            active-text-color="#ffd04b">
            <el-menu-item index="人气口红爆品">人气口红爆品</el-menu-item>
            <el-submenu index="魅力彩妆">
                <template slot="title">魅力彩妆</template>
                <el-submenu index="脸部彩妆">
                    <template slot="title">脸部彩妆</template>
                    <el-menu-item index="粉底">粉底</el-menu-item>
                    <el-menu-item index="修容">修容</el-menu-item>
                    <el-menu-item index="高光">高光</el-menu-item>
                    <el-menu-item index="腮红">腮红</el-menu-item>
                </el-submenu>
                <el-submenu index="唇部彩妆">
                    <template slot="title">唇部彩妆</template>
                    <el-menu-item index="口红">口红</el-menu-item>
                    <el-menu-item index="口红">唇釉</el-menu-item>
                </el-submenu>
                <el-menu-item index="2-3">眼部彩妆</el-menu-item>
                <el-submenu index="眉部彩妆">
                    <template slot="title">眉部彩妆</template>
                    <el-menu-item index="眉粉">眉粉</el-menu-item>
                    <el-menu-item index="眉膏">眉膏</el-menu-item>
                    <el-menu-item index="眉笔">眉笔</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-submenu index="护肤必选">
                <template slot="title">护肤必选</template>
                <el-submenu index="年轻秘密">
                    <template slot="title">年轻秘密</template>
                    <el-menu-item index="化妆水">水</el-menu-item>
                    <el-menu-item index="乳液">乳液</el-menu-item>
                </el-submenu>
                <el-submenu index="紧致肌肤">
                    <template slot="title">紧致肌肤</template>
                    <el-menu-item index="口红">面霜</el-menu-item>
                    <el-menu-item index="口红">眼霜</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="4">新品推荐</el-menu-item>
            <el-menu-item index="5">会员中心</el-menu-item>
        </el-menu>
            </div>

            <div class="pageHead" style="margin:10px 100px 10px;">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{path1}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{path2}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{path3}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div class="condition" style="margin:20px 100px 10px;display:flex;">
                <el-radio-group v-model="radio1">
                    <!-- <el-radio-button label="综合"></el-radio-button>
                    <el-radio-button label="北京"></el-radio-button>
                    <el-radio-button label="广州"></el-radio-button>
                    <el-radio-button label="深圳"></el-radio-button> -->
                </el-radio-group>
            </div>

            <div class="main-goods">
                <div class="second-body">
                    <ul class="second-war">
                        <li v-for="item in items1" :key="item.id">
                            <el-card shadow="hover">
                                <a class="item-a" href="#"><img :src="item.mainImage" alt="" @click="toDeail(item.id)"></a>
                                <el-link><strong>{{item.title}}</strong></el-link>
                                <p><span style="color:red;margin-right:80px;">现价:￥{{item.nowPrice}}</span>
                                <span style="background-color:pink;color:#fff">运费包邮</span>
                                    </p>
                                <button class="btn" onmouseover="this.style.backgroundColor='pink';" onmouseout="this.style.backgroundColor='';" @click="toCar(item.id)">加入购物车</button>
                            </el-card>
                        </li>
                    </ul>
                </div>

            </div>

            <div class="page">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="keyword.currentPage"
                        :page-size="keyword.pageSize"
                        layout="total, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>

     <div class="fourth-rail">
          <div class="fourth-title">
              <img src="@/assets/images/w.jpg" alt="">
          </div>
          <div class="fourth-body">
              
          </div>
      </div>
      
      <div class="fifth-rail">
          <div class="fifth-left">
              <div class="fl1">
                  <p><strong>关于我们</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>商户介绍</el-link></li>
                      <li><el-link>联系我们</el-link></li>
                      <li><el-link>正品承诺</el-link></li>
                  </ul>
              </div>
              <div class="fl1">
                  <p><strong>消费者指南</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>新手指南</el-link></li>
                      <li><el-link>常见问题</el-link></li>
                      <li><el-link>通关税费</el-link></li>
                  </ul>
              </div>
              <div class="fl1">
                  <p><strong>物流配送</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>配送方式</el-link></li>
                      <li><el-link>运费标准</el-link></li>
                      <li><el-link>物流跟踪</el-link></li>
                  </ul>
              </div>
              <div class="fl1">
                  <p><strong>售后政策</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>退货政策</el-link></li>
                      <li><el-link>退货流程</el-link></li>
                      <li><el-link>联系客服</el-link></li>
                  </ul>
              </div>
              <div class="fl1">
                  <p><strong>网站政策</strong></p>
                  <ul style="list-style: none;margin-left:-40px;">
                      <li><el-link>服务条款</el-link></li>
                      <li><el-link>隐私条款</el-link></li>
                  </ul>
              </div>
          </div>
          <div class="fifth-right">
              <img src="@/assets/images/er.jpg" alt="">
              <p><strong>关注我们</strong></p>
          </div>
      </div>
            
            <el-dialog
                title="添加购物车"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
                <span>恭喜你，已成功添加至购物车!</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">继续逛逛</el-button>
                    <el-button type="primary" @click="see">查看我的购物车</el-button>
                </span>
            </el-dialog>

      </el-main>

      <el-footer>
        <Foot/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Head from "@/views/layout/Head.vue"
import Foot from "@/views/layout/Foot.vue"
import {getByTitle} from "@/api/goods.js"
import {insert} from "@/api/cart.js"
import ShareData from '@/utils/localStorage.js'

export default {
    components: {
        Head,
        Foot,
    },
    data(){
        return{
            radio1:"综合",
            activeIndex2: '1',
            items1:[],
            keyword:{
                currentPage:1,
                pageSize:12,
                title:"",
            },
            total:0,
            path1:"",
            path2:"",
            path3:"",
            head:"https://zpl-1303223223.cos.ap-beijing.myqcloud.com",
            centerDialogVisible:false,
            car:{},
        }
    },
    created(){
        this.loadPath();
        this.loadData();
    },
    methods:{
        toDeail(val){
            console.log(val)
            // this.$router.push("/detail");
            this.$router.push({
                path:"/detail",
                name:"Detail",
                params:{id:val}
            })
        },
        handleSelect(key, keyPath) {
            // console.log(key, keyPath);
            this.path1=keyPath[0];
            this.path2=keyPath[1];
            this.path3=keyPath[2];
            this.loadData();
        },
        handleSizeChange(val) {
            this.keyword.pageSize=val;
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val){
            this.keyword.currentPage=val;
            this.loadData(false);
            // console.log(`当前页: ${val}`);
        },
        loadPath(){
            let pathList=this.$route.params.pathList;
            this.path1=pathList[0];
            this.path2=pathList[1];
            this.path3=pathList[2];
        },
        loadData(val){
            if(val){
                this.keyword.currentPage=1
            }
            this.keyword.title=this.path3;
            getByTitle(this.keyword).then(res=>{
                if(res.data.code==="0000"){
                    this.items1=res.data.data.records;
                    for(let i=0;i<this.items1.length;i++){
                        this.items1[i].mainImage=this.head+this.items1[i].mainImage;
                    }
                    this.total=res.data.data.total;
                }
            })
        },
        toCar(val){
            this.car.memberId=ShareData.getItem('memberId');
            this.car.goodId=val;
            this.car.goodNum=1;
            this.car.checked=0;
            console.log(this.car);
            insert(this.car).then(res=>{
                if(res.data.code==="0000"){
                    this.centerDialogVisible=true;
                }
            })
        },
        see(){
            this.$router.push("/car");
        },
    }
}
</script>

<style scoped>
.el-container {
  min-height: 100%;
}
.el-header{
    background-color: #fff;
    color: #333;
    text-align: center;
    /* line-height: 100px; */
  }
  .el-main {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    text-align: center;
    
  }
  .el-main::-webkit-scrollbar{
    display: none;
  }
  .el-footer {
    background-color: rgb(173, 163, 163);
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .na{
    margin: 0px 80px 0px;
}
.second-body{
    height: 500px;
    margin: 0px 80px 0px;
}
.second-war{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.second-war li{
    width: 300px;
    height: 380px;
    margin-right: 20px;
    margin-bottom:40px;
}
.btn{
    width: 260px;
    height: 40px;
    background-color:#000;
    color: #fff;
}
.page{
    margin-top: 770px;
    margin-bottom: 30px;
}
.fourth-title{
    margin-top: 30px;
    height: 100px;
}
.fourth-title img{
    width: 100%;
    margin-top: 50px;
}
.fifth-rail{
    width: 100%;
    height: 260px;
    background-color: rgb(248, 187, 117);
}
.fifth-left{
    width: 50%;
    height: 260px;
    /* background-color: #fff; */
    margin: 0px 20px 0px;
    display: flex;
}
.fl1{
    width: 100px;
    height: 130px;
    /* background-color: rgb(156, 35, 35); */
    margin-left: 50px;
    padding-top: 30px;
}
.fifth-right{
    width: 400px;
    height: 260px;
    /* background-color: #fff; */
    position: absolute;
    margin-top: -230px;
    margin-left: 900px;
}
</style>